<template>
    <div>
        <!-- 按钮组件 -->
        <div class="nav">
                <Button type="primary" @click="add()">添加</Button>
                <Button @click="removemany">删除多个</Button>
                <Input v-model="value" placeholder="请输入姓名" style="width: 300px" />
                <Button @click="seatch">搜索</Button>
                <Modal v-model="modal12" draggable scrollable :title="titles" @on-ok="ok" @on-cancel="cancel">
                    <Form :model="formItem" :label-width="80">
                        <FormItem label="用户" >
                            <Select v-model="formItem.user" placeholder="请选择用户类型">
                                <Option value="VIP">VIP用户</Option>
                                <Option value="普通用户">普通用户</Option>
                            </Select>
                        </FormItem>
                        <FormItem label="用户名：">
                            <Input v-model="formItem.username" placeholder="Enter something..."></Input>
                        </FormItem>
                        <FormItem label="密码：">
                            <Input v-model="formItem.password" placeholder="Enter something..."></Input>
                        </FormItem>
                        <FormItem label="学号：">
                            <Input v-model="formItem.studentId" placeholder="Enter something..."></Input>
                        </FormItem>
                        <FormItem label="姓名：">
                            <Input v-model="formItem.name" placeholder="Enter something..."></Input>
                        </FormItem>
                        <FormItem label="性别：">
                            <Input v-model="formItem.sex" placeholder="Enter something..."></Input>
                        </FormItem>
                        <FormItem label="年龄：">
                            <Input v-model="formItem.age" placeholder="Enter something..."></Input>
                        </FormItem>
                        <FormItem label="手机号：">
                            <Input v-model="formItem.phone" placeholder="Enter something..."></Input>
                        </FormItem>
                        <FormItem label="电子邮箱：">
                            <Input v-model="formItem.email" placeholder="Enter something..."></Input>
                        </FormItem>
                        <FormItem label="联系地址：">
                            <Input v-model="formItem.address" placeholder="Enter something..."></Input>
                        </FormItem>
                    </Form>
                </Modal>
        </div>
        <!-- 数据列表 -->
        <div class="div">
            <Table border ref="selection" :columns="columns" :stripe="true" :data="listdata" class="table" @on-select="select" @on-select-all="checkall" @on-select-all-cancel="cancelall">
                <template slot-scope="{row}" slot="action">
                    <Button type="primary" size="small" style="margin-right: 5px" @click="updata(row)">修改</Button>
                    <Button type="error" size="small" @click="remove(row._id)">删除</Button>
                </template>
            </Table>
            <Button @click="handleSelectAll(true)" style="margin-right: 5px" >全选</Button>
            <Button @click="handleSelectAll(false)" >取消全选</Button>
        </div>
        <!-- 分页组件 -->
        <div class="page">
            <Page :total="total" show-total @on-change="pagechange" show-sizer @on-page-size-change="sizechange" />
        </div>
    </div>
</template>
<script>
import { pub } from "../../mixins/pub"
export default {
    mixins:[pub],
        data () {
            return {
                value:"",
                 columns: [
                    {
                        type: 'selection',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: '用户类型',
                        key: 'user'
                    },
                    {
                        title: '用户名',
                        key: 'username'
                    },
                    {
                        title: '密码',
                        key: 'password'
                    },
                    {
                        title: '学号',
                        key: 'studentId'
                    },
                    {
                        title: '姓名',
                        key: 'name'
                    },
                    {
                        title: '性别',
                        key: 'sex'
                    },
                    {
                        title: '年龄',
                        key: 'age'
                    },
                    {
                        title: '手机号',
                        key: 'phone'
                    },
                    {
                        title: '邮箱',
                        key: 'email'
                    },
                    {
                        title: '地址',
                        key: 'address'
                    },
                    {
                        title: '添加时间',
                        width: 100,
                        key: 'ctime',
                        render: (h, params) => {
                            let time = this.$moment(params.row.ctime).format("YYYY-MM-DD hh:mm:ss")
                            return h('div', [
                                h('span', time)
                            ]);
                        }
                    },
                    {
                        title: '操作',
                        slot: 'action',
                        width: 150,
                        align: 'center'
                    }
                ],formItem: {
                    user:"",
                    username:"",
                    password:"",
                    studentId:"",
                    name:"",
                    sex:"",
                    age:"",
                    phone:"",
                    email:"",
                    address:""
                },

            }
        },
        methods:{
            get(){
                this.axios({
                    url:`${this.url}users/list`,
                    method:'post',
                    data:{
                        user: '普通用户',
                    }
                }).then(res=>{
                    this.listdata = res.data.rows;
                    this.total = res.data.total;
                })
            },
            seatch(){
                this.axios({
                    url:`${this.url}users/list`,
                    method:'post',
                    data:{
                        name:this.value
                    }
                }).then(res=>{
                    this.listdata = res.data.rows;
                    this.total = res.data.total;
                })
            },
            add(){
                    this.modal12 = true;
                    this.titles = "添加用户";
                    this.formItem.user=this.formItem.username=this.formItem.password=this.formItem.studentId=this.formItem.name=this.formItem.sex=this.formItem.age=this.formItem.phone=this.formItem.email=this.formItem.address = "";

            },
            ok(){
                var obj = this.formItem;
                this.axios({
                    url:`${this.url}users`,
                    method:'post',
                    data:obj
                }).then( ()=>{
                    this.success(true);
                    this.get();
                })
            }
        },
        mounted(){
            this.get()
        }
    }
</script>

<style lang="scss" scoped>
.use{
   text-align: center;
   Input{
       margin-bottom:10px;
   }
}
.nav{
    margin-bottom:10px;
    Button{
        margin-right:10px;
    }
}
.table{
    margin-bottom:10px;
}
.page{
        margin-top:10px;
    }
</style>